<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>嵌套路由</title>
    <script src="https://unpkg.com/vue@2.7.7/dist/vue.js"></script>
    <script src="https://unpkg.com/vue-router@3.6.5/dist/vue-router.js"></script>
  </head>
  <body>
    <div id="app1" style="border: 1px dashed red;margin-bottom: 2px;">
      <router-link to="/user/a001">to a001</router-link>
      <router-view></router-view>
    </div>
    
    <div id="app2" style="border: 1px dashed blue;margin-bottom: 2px;">
      <router-link to="/user/a001">to a001</router-link>
      <router-link to="/user/a002/profile">to UserProfile</router-link>
      <router-link to="/user/a003/posts">to UserPosts</router-link>
      <router-link to="/user/a004">to UserHome</router-link>
      <router-link to="/rootpath">to RootPath</router-link>
      <router-view></router-view>
    </div>
    
    
    
    <script type="text/javascript">
      const User = {
        template: '<div>User ID: {{$route.params.id}}</div>'
      }
      
      const router = new VueRouter({
        routes: [{path: '/user/:id', component: User}]
      })
      
      new Vue({
        router
      }).$mount("#app1")
      
      // 这里的 <router-view> 是最顶层的出口，渲染最高级路由匹配到的组件。同样地，一个被渲染组件同样可以包含自己的嵌套 <router-view>。例如，在 User 组件的模板添加一个 <router-view>：
      const User2 = {
        template: `
          <div>
            <h2>User2 ID: {{$route.params.id}}</h2>
            <router-view></router-view>
          </div>
        `
      }

      const UserProfile = {template: '<div>UserProfile</div>'}
      const UserPosts = {template: '<div>UserPosts</div>'}
      const UserHome = {template: '<div>UserHome</div>'}
      const RootPath = {template: '<div>RootPath</div>'}
      
      // 要在嵌套的出口中渲染组件，需要在 VueRouter 的参数中使用 children 配置：
      const router2 = new VueRouter({
        routes: [
          {
            path: '/user/:id', 
            component: User2,
            children: [
              {
                // 当 /user/:id/profile 匹配成功，
                // UserProfile 会被渲染在 User 的 <router-view> 中
                path: 'profile',
                component: UserProfile
              },
              {
                // 当 /user/:id/posts 匹配成功
                // UserPosts 会被渲染在 User 的 <router-view> 中
                path: 'posts',
                component: UserPosts
              },
              {
                // 要注意，以 / 开头的嵌套路径会被当作根路径。 这让你充分的使用嵌套组件而无须设置嵌套的路径。
                path: '/rootpath',
                component: RootPath
              },
              {
                // 当你访问 /user/foo 时，User 的出口是不会渲染任何东西，这是因为没有匹配到合适的子路由。如果你想要渲染点什么，可以提供一个 空的 子路由：(当 /user/:id 匹配成功，UserHome 会被渲染在 User 的 <router-view> 中)
                path: '',
                component: UserHome
              }
            ]
          }
        ]
      })
      
      new Vue({
        router: router2
      }).$mount('#app2')
    </script>
  </body>
</html>